<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            流式布局
                - 流式布局，就是百分比布局，也称非固定像素布局
                - 通过盒子的宽度设置成百分比根据屏幕的宽度来进行伸缩，不受固定宽度像素的限制，内容向两侧填充。(注意流式布局只是宽度设置成百分比)
                - 流式布局是移动web开发使用的比较常见的布局方式 
        */
        * {
            margin: 0;
            padding: 0;
        }

        .root{
            overflow: hidden;
        }

        .root>div:nth-child(1) {
            width: 50%;
            height: 400px;
            /* 问题来了，我们百分比布局，宽度根据窗口大小而变化，可是总不能无论窗口多宽你都50%吧，这样的话样式会崩掉的。所以我们需要引入两个新的单位min-width和max-width */
            min-width: 400px;
            max-width: 700px;
            background-color: pink;
            float: left;
        }

        .root>div:nth-child(2) {
            width: 50%;
            height: 400px;
            min-width: 400px;
            max-width: 700px;
            background-color: hotpink;
            float: left;
        }
    </style>
</head>

<body>
    <!-- 
        流式布局
            - 流式布局，就是百分比布局，也称非固定像素布局
            - 通过盒子的宽度设置成百分比根据屏幕的宽度来进行伸缩，不受固定宽度像素的限制，内容向两侧填充。(注意流式布局只是宽度设置成百分比)
            - 流式布局是移动web开发使用的比较常见的布局方式
     -->
    <div class="root">
        <div></div>
        <div></div>
    </div>
</body>

</html>